<template>
	<view>
		<u--form class="form" :rules="dataRule" ref="uForm" :model="dataForm" labelAlign="center">
			<u-form-item label="联系人:" prop="name" borderBottom labelWidth="200rpx">
				<u--input v-model="dataForm.name" border="none" placeholder="收件人姓名"></u--input>
			</u-form-item>
			<u-form-item label="联系电话:" prop="phone" borderBottom labelWidth="200rpx">
				<u--input v-model="dataForm.phone" border="none" placeholder="请输入联系电话"></u--input>
			</u-form-item>
			<u-form-item label="所在地区" @click="regionPickerShow=true" borderBottom labelWidth="200rpx" prop="region">
				<text>{{address || '选择地区'}}</text>
				<u-popup :show="regionPickerShow" closeable="true" @close="regionPickerShow = false">
					<button class="confirmBtn" @click="confirmRegion">确定</button>
					<view class="selectList">
						<button v-if="province" class="selectItem" @click="changeOptions(1)">{{province}}</button>
						<button v-if="city" class="selectItem" @click="changeOptions(2)">{{city}}</button>
						<button v-if="region" class="selectItem">{{region}}</button>
					</view>
					<scroll-view scroll-y="true" class="list">
						<view class="list-cell" v-for="item in addressOptions" :key="item.regionId"
							@click="select(item)">
							{{item.regionName}}
						</view>
					</scroll-view>
				</u-popup>
			</u-form-item>
			<u-form-item label="详细地址:" prop="detail" borderBottom labelWidth="200rpx">
				<u--input v-model="dataForm.detail" border="none" placeholder="请输入详细地址"></u--input>
			</u-form-item>
			<u-form-item label="设为默认地址:" prop="detail" labelWidth="260rpx">
				<checkbox v-model="dataForm.isDefault" :checked="dataForm.isDefault" @click="changeIsDefault">
				</checkbox>
			</u-form-item>
		</u--form>
		<view class="btn">
			<button v-if="dataForm.id" @click="del" class="delteBtn">删除地址</button>
			<button @click="submit" :class="dataForm.id ? 'saveBtn' : 'saveBtn2'">{{dataForm.id ? '保存':'添加地址'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				province: "",
				city: "",
				region: "",
				regionLevel: 0,
				list: [],
				// 显示选择的地区
				address: "",
				// 地址选项列表
				addressOptions: [],
				// 地址选择器打开状态
				regionPickerShow: false,
				dataForm: {
					id: 0,
					name: '',
					phone: '',
					province: '1000000',
					city: '1001000',
					region: '',
					detail: '',
					isDefault: false
				},
				dataRule: {
					'name': {
						required: true,
						message: '请输入收件人姓名'
					},
					'phone': {
						required: true,
						type: 'integer',
						min: 11,
						max: 11,
						message: '请输入正确的手机号'
					},
					'detail': {
						required: true,
						message: '请输入详细地址'
					},
					'region': {
						required: true,
						message: '请选择地区'
					}
				}
			}
		},
		onShow() {
			//初始化三级地址
			this.getAddressOptions(0, -1);
		},
		onLoad(option) {
			if (option.id) {
				this.getAddress(option.id)
				this.dataForm.id = option.id
			} else {
				this.dataForm.id = 0;
			}
		},
		methods: {
			changeOptions(type) {
				if (type == 1) {
					//重选一级地址
					this.getAddressOptions(0, -1);
					this.province = "";
					this.city = "";
					this.region = "";
					this.regionLevel = 0;
				} else {
					//重选二级地址
					this.getAddressOptions(1, this.dataForm.province);
					this.city = "";
					this.region = "";
					this.regionLevel = 1;
				}
			},
			select(item) {
				this.list[this.regionLevel] = item.regionName;
				if (this.regionLevel == 0) { //选择了一级地址
					//获取二级地址
					this.getAddressOptions(1, item.regionId);
					this.province = item.regionName;
					this.dataForm.province = item.regionId;
				} else if (this.regionLevel == 1) {
					//选择了二级地址，获取三级地址
					this.getAddressOptions(2, item.regionId);
					this.city = item.regionName
					this.dataForm.city = item.regionId;
				} else {
					const temp = this.addressOptions;
					this.addressOptions = [];
					this.addressOptions = temp;
					this.region = item.regionName;
					this.dataForm.region = item.regionId;
				}
				this.regionLevel++;
			},
			async getAddress(id) {
				const res = await this.$myRequest({
					url: 'user/applet/getAddress/' + id,
				})
				if (res && res.code === 0) {
					this.dataForm.name = res.data.name;
					this.dataForm.phone = res.data.phone;
					this.dataForm.province = res.data.province;
					this.dataForm.city = res.data.city;
					this.dataForm.region = res.data.region;
					this.dataForm.detail = res.data.detail;
					this.address = res.data.fullRegion;
					this.dataForm.isDefault = res.data.isDefault;
					this.originIsDefault = this.dataForm.isDefault;
				}
			},
			// 获取地址选项
			async getAddressOptions(level, regionParentId) {
				const res = await this.$myRequest({
					url: 'user/applet/getAddressOptions/' + regionParentId
				})
				this.addressOptions = res.data
				if (this.addressOptions.length == 1) {
					this.select(this.addressOptions[0]);
				}
			},
			// 确认地区
			confirmRegion() {
				this.regionPickerShow = false;
				this.address = this.province + '-' + this.city + '-' + this.region;
			},
			// 表单提交
			submit() {
				this.$refs.uForm.validate().then(async res => {
					uni.showLoading({
						title: '正在保存...'
					})
					this.dataForm.isDefault = this.dataForm.isDefault ? 1 : 0;
					res = await this.$myRequest({
						url: 'user/applet/' + (this.dataForm.id ? 'updateAddress' :
							'addAddress'),
						method: this.dataForm.id ? 'PUT' : 'POST',
						data: this.dataForm
					})
					uni.hideLoading()
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			async del() {
				uni.showModal({
					content: '确定要删除吗?',
					success: async res => {
						if (res.confirm) {
							const res = await this.$myRequest({
								url: 'user/address/delete',
								method: 'DELETE',
								data: [this.dataForm.id]
							})
							if (res && res.code === 0) {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
							uni.navigateBack();
						}
					}
				})
			},
			changeIsDefault() {
				this.dataForm.isDefault = !this.dataForm.isDefault;
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirmBtn {
		margin: 20rpx 200rpx 0 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 35rpx;
		background-color: #4CAF50;
		color: white;
	}

	.selectList {
		margin: 30rpx 0 30rpx 30rpx;

		.selectItem {
			margin: 10rpx 0 0 0;
			width: 200rpx;
			height: 60rpx;
			background-color: #FFB300;
			color: white;
			line-height: 60rpx;
			font-size: 30rpx;

		}


	}

	.list {
		border-top: solid 1rpx #999999;
		height: 650rpx;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.btn {
		margin-left: 20rpx;
		position: fixed;
		bottom: 20rpx;
		display: flex;

		.delteBtn {
			background-color: #e7e7e7;
			color: #4CAF50;
			width: 260rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 40rpx;

		}

		.saveBtn {
			margin: 0 0 0 20rpx;
			background-color: #FF8300;
			color: white;
			height: 90rpx;
			width: 440rpx;
			line-height: 90rpx;
			font-size: 40rpx;
		}

		.saveBtn2 {
			margin: 0 75rpx 0 75rpx;
			background-color: #FFB300;
			color: white;
			height: 90rpx;
			width: 600rpx;
			line-height: 90rpx;
			font-size: 40rpx;
		}
	}
</style>
